<div class="profile-content row" style="background:rgba(11,189,38,.8);">
	<div class="user-info-con large-10 large-centered column">
		<div class="user-info-left small-2 column">
			<img src="img/dp1.jpg">
		</div>
		<div class="user-info-middle small-6 column">
				<div data-alert class="success alert alert-box" style="position:absolute;">
				 <i class="fa fa-envelope-o fa-fw"></i>  Ooopps! Your email is not yet activated! Pls. activate <a href>here</a>
				  <a href="#" class="close">&times;</a>
				</div>
			<h1>Depak Yagar</h1> 
			<ul class="inline-list">
				<li>Graphic Designer |</li>
				<li><a href><strong>Remote Staff Inc.</strong></a></li>
			</ul>

			<a class="user-address"><i class="fa fa-map-marker"></i> <strong>Manila, Philippines</strong></a><br>
		</div>
		<div class="user-info-right text-center  small-4 column"><br><br><br>
			<ul class="right inline-list">
			 <li>
				<a data-options="align:left" data-dropdown="drop21" aria-controls="drop21" aria-expanded="false">
					<h2 class="text-center">2,311</h2>Connection
				</a>
				<div id="drop21" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
					<p>Lee Chin Send you a request</p><a class="tiny button">Accept</a>
				</div>
			 </li>
			 <li>
				<a data-options="align:left" data-dropdown="drop21" aria-controls="drop21" aria-expanded="false">
					<h2 class="text-center">619</h2>Group
				</a>
				<div id="drop21" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
					<p>Lee Chin Send you a request</p><a class="tiny button">Accept</a>
				</div>
			 </li>
			 <li>
				<a data-options="align:left" data-dropdown="drop21" aria-controls="drop21" aria-expanded="false">
					<h2 class="text-center">71</h2>Forum
				</a>
				<div id="drop21" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
					<p>Lee Chin Send you a request</p><a class="tiny button">Accept</a>
				</div>
			 </li>
			</ul>
		</div>
	</div>
</div>

<div class="profile-content-2lvl row">
	<div class="large-10 large-centered column">
		<div class="profile-content-left large-3 column"><br>
			<div class="profile-comp large-12 column">
				<a>Profile Completeness</a>
				<div class="progress"> 
					<span class="meter" style="width: 57%"> 
						&nbsp&nbsp<a>57%</a>
					</span>
				</div>
				<a class="percent-cmplt">Add where you work +12%</a>
			</div>

			<div class="pending-flwreq large-12 column">
				<a>Pending Follow Request</a>
				<div class="req-wrap large-12 column">
					<div class="large-4 column">
						<img src="img/pro1.jpg">
					</div>
					<div class="req-left text-center large-8 column">
						<a><strong>Narwal Garmanx</strong></a>
						<input onclick="alerts()" class="accept-btn" type="button" value="Accept"><script> function alerts() { alert("fff");}</script>
					</div>
				</div>
			</div>

			<div class="pending-flwreq large-12 column">
				<a>Manage Groups</a>
				<div class="req-wrap large-12 column" style="padding:0;">
					<div class="large-3 column" style="padding:0;">
						<img src="img/bg1.jpg">
					</div>
					<div class="req-left large-9 column" style="padding:0;">
						<a><strong>Acer Lovers</strong></a><br>
						&nbsp;&nbsp;&nbsp;<i style="color:gray;font-size:.7em;" class="fa fa-users"> 34,322</i><br>
						&nbsp;&nbsp;&nbsp;<i style="color:gray;font-size:.7em;"  class="fa fa-share"> 322</i>
					</div>
				</div>
				<div class="req-wrap large-12 column" style="padding:0;">
					<div class="large-3 column" style="padding:0;">
						<img src="img/bg.jpg">
					</div>
					<div class="req-left large-9 column" style="padding:0;">
						<a><strong>Php User</strong></a><br>
						&nbsp;&nbsp;&nbsp;<i style="color:gray;font-size:.7em;" class="fa fa-users"> 4,021</i><br>
						&nbsp;&nbsp;&nbsp;<i style="color:gray;font-size:.7em;"  class="fa fa-ban on fa-share"> </i>
					</div>
				</div>
				<br>
				<a class="right">See more <i class="fa fa-share fa-rotate-90"></i></a>
			</div>
		</div>

<!--right div content-->
	<div class="profile-content-right large-9 column" style="padding:0;">
<!--Wrap Posts-->
		<div id="post_id" class="wall-post-wrap large-12 column" style="padding:0;">
			<div class="large-1 columns">
				<img src="img/dp1.jpg" alt="user picture" style="width:2.5rem;height:2.5rem;border-radius:4rem;">
			</div>
			<div class="large-11 columns" style="padding:0;">
				<p>Brett Virdor</p>
				<p style="margin-top:-1.6rem;font-size:.59rem;"><i class="fa fa-clock-o"></i> Just now</p>
			</div>
			<div class="large-12 columns" style="padding:0;">
				<p>#behomebased Bacon ipsum dolor sit amet nulla exercitation eiusmod commodo, chuck duis velit. ham qui sint exercitation eiusmod commodo, chuck duis velit. </p>
			</div>
<!--Show img if found-->				
			<div class="text-center large-12 columns" style="padding:0;">
				<img src="img/bg3.jpg" alt=""  style="max-height">
			</div>
<!--End Show img if found-->

<!--Show comments if found-->
			<div class="comment-post-wrap large-12 columns" style="padding:.6rem 0rem 0rem .6rem;">
				<div class="large-1 columns">
					<img src="img/pro2.jpg" style="width:2rem;height:2rem;border-radius:4rem;">
				</div>
				<div class="large-9 columns" style="padding:0;">
					<a>Tim Tiu</a>
					<a style="margin-top:-2rem;font-size:.59rem;"><i class="fa fa-clock-o"></i> 3 minutes ago</a>
				</div>
				<div class="text-right large-2 columns" style="">
					<a><i class="fa fa-times"></i></a>
				</div>
				<div class="large-11 large-offset-1 columns" style="padding:0;margin-top:-.5rem;font-size:.6rem;">
					<p style="font-size:.9rem;">Exercitation eiusmod commodo, chuck duis velit. eiusmod commodo, chuck duis velit. eiusmod commodo, chuck duis velit. ham qui Amet nulla exercitation eiusmod commodo, chuck duis velit. ham qui sint exercitation eiusmod commodo, chuck duis velit.</p>
				</div>				
			</div>
<!--End Show comments if found-->			
		</div>
<!--End Wrap Posts-->

<!-- accord posts by year -->
			<dl class="accordion" data-accordion> 
				<dd class="accordion-navigation"> 	
					<a class="text-center"  href="#panel1">2013</a> 
					<div id="panel1" class="content">
					 	<h4 class="text-center">No post to show</h4><br>
					</div> 
				</dd> 
				<dd class="accordion-navigation"> 	
					<a class="text-center"  href="#panel2">2014</a> 
					<div id="panel2" class="content">
					 	<h4 class="text-center">No post to show</h4><br>
					</div> 
				</dd> 			
			</dl>
<!-- end accord posts by year -->
		</div>
	</div>
</div>









<style>
.comment-post-wrap:hover {
	background: #EBEDDD;
}
</style>



<style>
body{
	background: #D8EDED;
}

</style>


<style>
.comment-post-wrap:hover {
	background: #EBEDDD;
}
.wall-post-wrap:hover{
	border:solid 1px;
}
</style>